<template>
  <div id="app">
    <el-container style="background-color: #3B82F6;">
      <!-- 标题栏内容显示 -->
      <el-header>
        <img src="@/assets/djs.jpg" alt="" style="width: 40px; position: relative; top: 10px;;">
        <span style="font-size: 20px; margin-left: 20px; color: white;">CRM系统</span>

        <!-- 右侧个人信息显示,下拉退出 -->
        <el-dropdown style="float: right; height: 60px; line-height: 60px;">
          <span class="el-dropdown-link" style="color: white; font-size: 16px;">{{ user.ename }}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="logout()">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    </el-container>

    
    <el-container>
      <!-- 导航栏内容显示 -->
      <el-aside style="overflow: hidden; min-height: 100vh; background-color: #BFDBFE; width: 250px">
        <el-menu
      :default-active="$route.path" router
      class="el-menu"
      background-color="#BFDBFE"
      text-color="#374151"
      active-text-color="#F59E0B">

      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">系统首页</span>
      </el-menu-item>

      <el-menu-item index="/customer" >
        <i class="el-icon-document"></i>
        <span slot="title">客户管理</span>
      </el-menu-item>
      
      <el-menu-item index="/business" >
        <i class="el-icon-document"></i>
        <span slot="title">业务管理</span>
      </el-menu-item>

      <el-menu-item index="/workOrder" >
        <i class="el-icon-document"></i>
        <span slot="title">工单管理</span>
      </el-menu-item>

      <el-menu-item index="/user">
        <i class="el-icon-setting"></i>
        <span slot="title">人员管理</span>
      </el-menu-item>
    </el-menu>
      </el-aside>

      <!-- 主体内容显示 -->
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      }
    },
    methods: {
      logout() {
        localStorage.removeItem('user');
        this.$router.push('/login');
      }
    },
    
  }
</script>

<style>
  /* 去除下拉框时产生的边框 */
  .el-menu{
    border:none !important;
}
</style>